<template>
  <div>
    <el-container style="min-height: 100vh; height: 100%;">
      <el-header>
        <div>
          <Header></Header>
        </div>
      </el-header>
      <el-main>
        <div style="margin-top: 55px;">
          <h3>博客列表</h3>
          <el-card shadow="never">
            <div>
              <el-row :gutter="20">
                <el-col :span="12" :class="{ line: (index + 1) % 2 != 0 }" style="margin:15px 0px;"
                  v-for="(item, index) in list" :key="index">
                  <el-card :body-style="{ padding: '0px' }">
                    <div style="padding: 14px;" @click="gotoContent(item.id)">
                      <span>{{ item.title }}</span><br />
                      <span style="font-size: 14px;">作者： {{ item.author }}</span>
                      <div class="bottom clearfix">
                        <time class="time">{{ item.create_time | formatDateTime}}</time>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </el-main>
      <el-footer>
        <div>
          <Footer></Footer>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  data() {
    return {
      list: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  created: function () {
    this.load()
  },
  methods: {
    async load() {
      let api = "/api/blog/list/" + this.currentPage + "/" + this.pageSize
      this.$axios.get(api).then((response) => {
        let code = response.data.code
        if (code == 0) {
          this.list = response.data.data.records
          this.currentPage = response.data.data.current
          this.total =  response.data.data.total
        }
      })
    },
    gotoContent: function (id) {
      this.$router.push({ path: '/content/' + id}).catch(() => { })

    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val
        this.load()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.load()
    }
  }
  // async asyncData({ $axios }) {
  //   const ip = await $axios.$get('http://icanhazip.com')
  //   return { ip }
  // }
}
</script>

<style scoped>
.line {
  border-right: 1px solid #ccc;
}
</style>
